<template>
  <div>
    <div class="department" v-loading="loading">
      <div class="left">
        <el-tree ref="treeRef" highlight-current default-expand-all :current-node-key="currentNodekey" node-key="id" :data="treeList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </div>
      <div class="right" >
        <div v-if="departmentList.length !== 0"  >
          <div class="user-dept" v-for="item in departmentList" :key="item.id">
            <el-checkbox-group v-model="checkList" v-if="isCollaborator" @change="onSelectChange">
              <el-checkbox :label="item.id+'-'+item.realname">
                <img src="@/assets/user_header.png" alt="">
                <div class="user-dept-name">{{ item.realname }}</div>
              </el-checkbox>
            </el-checkbox-group>
            <div class="dept-radio" v-else @click="changeUser(item)">
              <img src="@/assets/user_header.png" alt="">
              <div class="user-dept-name">{{ item.realname }}</div>
            </div>
          </div>
        </div>
        <div v-else style="height: 100%;display: flex;justify-content: center;align-items: center;">
          暂无数据
        </div>
      </div>
    </div>
    <div style="text-align:right;" v-if="false">
      <el-button type="primary" @click="submit">确认</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Department',
  data() {
    return {
      loading:null,
      treeList: [],
      departmentList: [],
      checkList: [],
      currentNodekey: "",
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  props: ["isCollaborator"],
  created() {
    this.getDept();
  },
  methods: {
    changeUser(value) {
      this.$emit('selectUser', value)
    },
    submit() {
      if (this.checkList.length === 0) {
        return this.$message.error("请选择部门人员");
      }
      this.$emit('selectCollaborator', this.checkList)
    },
    cancel() {
      this.$emit('cancelUser')
    },
    handleNodeClick(data) {
      this.loading=true
      this.$http.get(`/dept/${data.id}/users`, {
        params: {
          limit: 999
        }
      }).then(res => {
        this.departmentList = res.data.data.filter(item => {
          return item.position_id === 5
        });
        this.loading=false
      })
    },
    // 获取部门
    getDept() {
      this.loading=true
      //获取部门列表
      this.$http.get('/dept/index').then(res => {
        let dept = [...res.data.data];
        function arrayToTree(array, pid) {
          let result = []
          array.forEach(item => {
            if (item.pid === pid) {
              item.children = arrayToTree(array, item.id)
              result.push(item)
            }
          })
          return result
        }

        this.treeList = arrayToTree(dept, 0)
        this.loading=false
        if (this.treeList.length > 0) {
          this.currentNodekey = this.treeList[0].id;
          this.$nextTick(() => {
            this.$refs.treeRef.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
          });
          this.$http.get(`/dept/${this.currentNodekey}/users`, {
            params: {
              limit: 999
            }
          }).then(res => {
            this.departmentList = res.data.data.filter(item => {
              return item.position_id == 5
            });
          })
        }
      })
    },
    onSelectChange(val){
      this.$emit('selectchange',val)
    }
  }
}
</script>

<style lang="scss">
.department {
  height: 350px;
  display: flex;
  justify-content: space-between;

  .left {
    width: 50%;
    overflow: auto;
    border-right: 1px solid #eeeeee;

    .el-tree-node__content {
      padding: 5px 0;
    }

    .el-tree--highlight-current .is-current.el-tree-node > .el-tree-node__content {
      padding: 5px 0;
      background-color: #e7f9f9 !important;
    }
  }

  .right {
    width: 50%;
    box-sizing: border-box;
    overflow: auto;

    .user-dept {
      margin: 10px 0 0 20px;
      cursor: pointer;

      .el-checkbox, .el-checkbox__label, .dept-radio {
        display: flex;
        align-items: center;
      }

      img {
        width: 36px;
        height: 36px;
      }

      .user-dept-name {
        margin-left: 5px;
      }

    }
  }
}
</style>
